<template>
	<div class="page">
		<div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">报警信息</span>　|　<span>当前报警统计</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div>
		<!-- 展示列表模块 -->
		<div class="headerTop">
			<span v-if="grade<=2">所属项目:</span>
			<el-select v-if="grade<=2" v-model="option" placeholder="选择项目" class="inpu">
				<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
				</el-option>
			</el-select>
			<!-- 设备名称:
			<el-input type="text" v-model="keyword" class="inpu searchinp" placeholder="输入设备名称"></el-input> -->
			<!-- 报警时间:
			<el-date-picker v-model="value" type="daterange" align="left" unlink-panels value-format="yyyy-MM-dd"
				range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
			</el-date-picker> -->
			<el-button type="primary" size="small" style="vertical-align:
				middle;margin-left:0.3rem;" @click="searchTotal">查询</el-button>
			<!-- <el-button type="primary" size="small" style="vertical-align: middle;" @click="showAll_2" v-show="all_2">
				刷新全部</el-button> -->
		</div>
		<div class="container_table">
			<el-table :data="totaldata" size="mini" border style="width:99.4%;" :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
				'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'
				}" :cell-style="{'fontSize':'0.3rem'}"  default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="num">
				<el-table-column  prop="num" align="center" width="80" label="序号" >
				</el-table-column>
				<!-- <el-table-column prop="product_name" label="所属项目" align="center" min-width="200">
				</el-table-column> -->
				<el-table-column prop="equip_name" label="设备名称" align="center" min-width="200">
				</el-table-column>
				<el-table-column label="分组名称" align="center" min-width="180">
					<template slot-scope="scope">
						<span>{{scope.row.sgroup_name?scope.row.sgroup_name:'-'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="sensor_name" label="数据点名称" align="center" min-width="200">
				</el-table-column>
				<!-- <el-table-column prop="alarm_type" label="报警类型" align="center" min-width="120">
				</el-table-column> -->
				<el-table-column prop="trigger_cond" label="触发条件" align="center" min-width="150">
				</el-table-column>
				<el-table-column prop="last_value" label="当前值" align="center" min-width="100">
				</el-table-column>
				<el-table-column prop="alarm_time" label="报警时间" align="center" min-width="160" sortable>
				</el-table-column>
			</el-table>
			<!-- <div class="pagination">
				<el-pagination @size-change="handleSizeChange_2" @current-change="current_change_2"
					:current-page="queryParams_2.pageNo" :page-size="queryParams_2.pageSize" :page-sizes="[10,15,20]"
					layout="total,
					sizes, prev, pager, next, jumper" :total="queryParams_2.total">
				</el-pagination>
			</div> -->
		</div>
		

	</div>
</template>

<script>
	export default {
		name: 'alarmTotal',
		data() {
			return {
				grade:localStorage.getItem("grade"),
				option:0,
				options: [],
				tableHead: localStorage.getItem("bgcolor"),
				// keyword: '', //输入框内容
				// queryParams: {
				// 	pageNo: 1,
				// 	pageSize: 15,
				// 	total: 0
				// },
				//pburl:'http://39.98.232.220:8083/',
				//tabledata: [],
				totaldata:[]
				//value: [],
				//pickerOptions: this.$pickerOptions

			}
		},

		created() {
			if(this.grade<=2){
               this.getProduct();
			   
			}
		},
		mounted() {
			var that=this;
			setTimeout(function(){
			   that.showTotal();
			},600)
		},

		methods: {
			// current_change: function(currentPage) {
			// 	this.queryParams.pageNo = currentPage;
			// 	this.showList(currentPage, this.queryParams.pageSize, this.option, this.keyword, this.value.join('~'));
			// 	//console.log(currentPage)
			// },
			// handleSizeChange(val) {
			// 	this.queryParams.pageSize = val;
			// 	this.showList(this.queryParams.pageNo, val, this.option, this.keyword, this.value.join('~'));
			// },
			goBack() {
			    this.$router.go(-1);
			},

			showTotal() {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/alarm/summary',
						data: {
							"product_id":this.option
							// "equip_name": equip,
							// "limit": size,
							// "page": num
                        }
					}).then(res => {
						//console.log(that.$parent.yktoken)
						if (res && res.data.result == "success") {
							this.totaldata = res.data.data;
							//console.log(this.totaldata);
							//this.queryParams_2.total = res.data.count;
							//console.log(res)
						}
					}).catch(error => {
						console.log(error);
						this.totaldata = [];
						// this.queryParams_2.total = 0;
						// this.queryParams_2.pageNo = 1;
					});
					
			},
			
			getProduct() {
				this.options=[];
				this.$http({
					method: 'post',
					url: 'api/product/all',
					data: {}
				}).then(res => { //
					//console.log(res.data.data)
					if (res && res.data.result == "success") {
						for (var i = 0; i < res.data.data.length; i++) {
							var option = {
								value: res.data.data[i].id,
								label: res.data.data[i].product_name
							}
							this.options.push(option)
						}
						this.option = this.options[0].value;
						
					}
				}).catch(error => {
					console.log(error);
				});
			},
			
			searchTotal() {
				//this.all_2 = true;
				this.showTotal();
			}
			
			// showAll_2() {
			// 	this.all_2 = false;
			// 	this.showTotal(0);
			// }
		}
	}
</script>
<style scoped>
	.searchinp {
		margin-right: 0.4rem;
	}

	/* 表格 */
    .container_table {
		margin-top: 0.2rem;
	}
	
	.inpu {
		vertical-align: middle;
		width: 5rem;
		font-size: 0.25rem;
		margin-right: 0.3rem;
	}
</style>
